<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<form @submit="formSubmit" @reset="formReset">
				<view class="uni-form-item uni-column">
					<view class="title">微信号</view>
					<input class="uni-input" name="weixin" placeholder="请输入姓名" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">身高</view>
					<input class="uni-input" name="shengao" placeholder="170cm" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">学历</view>
					<input class="uni-input" name="education" placeholder="本科" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">工作</view>
					<input class="uni-input" name="work" placeholder="前端" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">出生日期</view>
					<input class="uni-input" name="birthday" placeholder="出生日期" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">出生地</view>
					<input class="uni-input" name="birthdayPlace" placeholder="出生地" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">现居地</view>
					<input class="uni-input" name="currentPlace" placeholder="现居地" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">自我介绍</view>
					<textarea class="uni-textarea" name="selfIntroduction" placeholder="自我介绍" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">性别</view>
					<radio-group name="gender">
						<label>
							<radio value="男" /><text>男</text>
						</label>
						<label>
							<radio value="女" /><text>女</text>
						</label>
					</radio-group>
				</view>
<!-- 				<view class="uni-form-item uni-column">
					<view class="title">爱好</view>
					<checkbox-group name="loves">
						<label>
							<checkbox value="读书" /><text>读书</text>
						</label>
						<label>
							<checkbox value="写字" /><text>写字</text>
						</label>
					</checkbox-group>
				</view> -->
				<uni-file-picker
				    v-model="imageValue" 
				    fileMediatype="image" 
				    mode="grid" 
				    @select="select" 
				    @progress="progress" 
				    @success="success" 
				    @fail="fail" 
					title="最多选择9张图片"
					ref="files"
					:auto-upload="false"
				></uni-file-picker>
				<view class="uni-btn-v">
					<button form-type="submit" @click="upload">Submit</button>
					<button type="default" form-type="reset">Reset</button>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
	import graceChecker from "../common/graceChecker.js"
	export default {
		data() {
			return {
				imageValue:[],
				userInfo : {
					weixin: "",
					shengao: "",
					edcation: "",
					work: "",
					birthday: "1992",
					birthdayPlace: "安阳",
					currentPlace: "郑州",
					shengao: "170cm",
					education: "本科",
					work: "前端",
					selfIntroduction: "自我介绍",
					userImages: [],
				}
			}
		},
		methods: {
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
                //定义表单规则
                var rule = [
                    {name:"weixin", checkType : "string", checkRule:"",  errorMsg:"输入微信号"},
					{name:"birthday", checkType : "string", checkRule:"",  errorMsg:"输入年龄"},
					{name:"birthdayPlace", checkType : "string", checkRule:"",  errorMsg:"输入出生地"},
					{name:"currentPlace", checkType : "string", checkRule:"",  errorMsg:"现居地"},
					{name:"selfIntroduction", checkType : "string", checkRule:"",  errorMsg:"自我介绍"},
                    {name:"gender", checkType : "in", checkRule:"男,女",  errorMsg:"请选择性别"},
                    {name:"loves", checkType : "notnull", checkRule:"",  errorMsg:"请选择爱好"}
                ];
                //进行表单检查
                // var formData = e.detail.value;
                // var checkRes = graceChecker.check(formData, rule);
                // if(checkRes){
                //     uni.showToast({title:"验证通过!", icon:"none"});
                // }else{
                //     uni.showToast({ title: graceChecker.error, icon: "none" });
                // }
				
				var formdata = e.detail.value
				// uni.showModal({
				//     content: '表单数据内容：' + JSON.stringify(formdata),
				//     showCancel: false
				// });
				this.userInfo.weixin = e.detail.value.weixin;
				this.userInfo.birthday = e.detail.value.birthday;
				this.userInfo.birthdayPlace = e.detail.value.birthdayPlace;
				this.userInfo.currentPlace = e.detail.value.currentPlace;
				this.userInfo.shengao = e.detail.value.shengao;
				this.userInfo.education = e.detail.value.education;
				this.userInfo.work = e.detail.value.work;
				console.log("userInfo : weixin = " + this.userInfo.weixin + " images = " + this.userInfo.userImages)
			},
			formReset: function(e) {
				console.log('清空数据')
			},
			upload(){
			    this.$refs.files.upload()
			},
			// 获取上传状态
			select(e){
			    console.log('选择文件：',e)
			},
			// 获取上传进度
			progress(e){
			    console.log('上传进度：',e)
			},
						
			// 上传成功
			success(e){
			    console.log('上传成功')
				console.log("imageValue = " + JSON.stringify(this.imageValue))
				for (let i = 0; i < this.imageValue.length; i++) {
					console.log(this.imageValue[i].fileID)
					this.userInfo.userImages.push(this.imageValue[i].fileID)
				}
			
				// 这儿的foreach的匿名函数内部无法访问this.userImages,使用map应该可以通过返回值得到
				// this.imageValue.forEach(function(value) {
				// 	console.log(value.fileID)
				// 	this.userImages.push(value.fileID)
				// })
				console.log("userInfo.userImages" +  JSON.stringify(this.userInfo.userImages))
			},
						
			// 上传失败
			fail(e){
			    console.log('上传失败：',e)
			},
		    
			//添加一条数据库
			async add() {
				return await uniCloud.callFunction({
					name: 'testadd',
					data: {
						weixin: this.userInfo.weixin,
						shengao: this.userInfo.shengao,
						education: this.userInfo.education,
						work: this.userInfo.work,
						birthday: this.userInfo.birthday,
						birthdayPlace: this.userInfo.birthdayPlace,
						currentPlace: this.userInfo.currentPlace,
						images: this.userInfo.userImages,
						createTime: Date.now()
					}
				}).then((res) => {
					uni.hideLoading()
					uni.showModal({
						content: `提交成功`,
						showCancel: false
					})
					console.log(res)
					return  res.result.id
				}).catch((err) => {
					uni.hideLoading()
					uni.showModal({
						content: `添加数据失败，错误信息为：${err.message}`,
						showCancel: false
					})
					console.error(err)
				})
			}
		},
		
		watch: {
			'userInfo.userImages' :  {
			handler(newName, oldName) {
				console.log("newName: " + newName + " oldName = " + oldName)
				this.add()
			},
			deep:true
			},
		}
	}
</script>

<style>
	.uni-form-item .title {
		padding: 20rpx 0;
	}
</style>
